<template>
  <div class="version">
    <el-tag disable-transitions type="info">{{ currentVersion.version }}</el-tag>
    <el-tag disable-transitions style="margin-left: -8px">{{ currentVersion.environment }}</el-tag>
  </div>
</template>

<script lang="tsx" setup>
import { ref } from "vue";

const currentVersion = ref({
  version: import.meta.env.VITE_APP_VERSION,
  environment: import.meta.env.VITE_DEV_UPDATE_CHANNEL,
});
defineOptions({
  name: "Version",
});
</script>

<style scoped lang="scss">
.version {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--el-color-info);
  font-size: 0.9rem;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
